<!--{template lyear:header_simple_start}-->
<style>
  /* 裁剪样式 */
  .image-wrapper {
      height: 364px;
      width: 100%;
      box-shadow: inset 0 0 3px rgba(0, 0, 0, .075);
      background-color: #fcfdfe;
      overflow: hidden;
  }
  .image-preview {
      float: left;
      margin-bottom: 0.5rem;
      margin-right: 0.5rem;
      border: 1px solid #f1f2f3;
      border-radius: 2px;
      background-color: #fff;
      overflow: hidden;
  }
  .image-preview img {
      vertical-align: top;
  }
  .preview-lg {
    height: 200px;
    width: 200px;
  }
  .preview-md {
    height: 120px;
    width: 120px;
  }
  .preview-sm {
    height: 48px;
    width: 48px;
  }
  @media (max-width: 991px) {
      #image-modal .image-btns {
          margin-bottom: 15px;
      }
  }
  [data-theme='dark'] .image-wrapper,
  [data-theme='dark'] .image-preview {
      background-color: rgba(255,255,255, .2);
  }
  [data-theme='dark'] .image-preview {
      border-color: rgba(255,255,255, .2);
  }
</style>
<script type="text/javascript" src="static/js/jquery.textareaexplander.js?{VERHASH}"></script>
<link rel="stylesheet" type="text/css" href="static/lyear/js/cropper/cropper.min.css">
<!--{template lyear:header_simple_end}-->
<main class="bs-main-container">
	<div class="container-fluid">
		<div class="card">
			<div class="card-body container">
      <!--{if $vid}-->
      <div class="alert <!--{if $showbtn}-->alert-warning<!--{else}-->alert-success<!--{/if}-->">
          <!--{if $showbtn}-->
            <p><i class="mdi mdi-help-circle-outline" ></i> {lang profile_message1}。</p> 
            <!--{if $_G['setting']['verify'][$vid]['desc']}-->
            {eval $desc=dzzcode($_G['setting']['verify'][$vid]['desc']);}
            <p class="ml20">$desc</p>
            <!--{/if}-->
          <!--{else}-->
           <p><i class="mdi mdi-check-bold" ></i> {lang profile_message2}</p>
          <!--{/if}-->
      </div>
      <!--{else}-->
      <div class="mb-2">
      	<div class="progress progress-relative" style="margin:0">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="$userstatus[profileprogress]" aria-valuemin="0" aria-valuemax="100" style="width: {$userstatus[profileprogress]}%;min-width: 100px;">
            <span class="sr-only">{lang Information_complete} {$userstatus[profileprogress]}% </span>
          </div>
        </div>
      </div>
      <!--{/if}-->
      <iframe id="frame_profile" name="frame_profile" style="display: none"></iframe>
      <div class="d-flex mb-3">
        <img src="avatar.php?uid=$_G['uid']" alt="{$_G['username']}" class="cropimage avatar-xl rounded-circle me-3">
        <div class="flex-grow-1">
          <input type="hidden" class="form-control image-src" name="picurl_two" id="picurl_two" value="avatar.php?uid=$_G['uid']" />
          <button class="btn btn-outline-primary trigger-btn" type="button" <!--{if $my_info}-->disabled<!--{/if}-->>修改头像</button>
          <p class="mt-1 mb-0">选择一张您喜欢的图片，裁剪后会自动生成200x200大小，上传图片大小不能超过2M。</p>
        </div>
      </div>
      <form id="accountform" name="accountform" class="row gx-3 gy-2 align-items-center" action="{MOD_URL}" method="post" enctype="multipart/form-data" target="frame_profile" onsubmit="clearErrorInfo();">
        <input type="hidden" name="profilesubmit" value="true" />
        <input type="hidden" name="formhash" value="{FORMHASH}" />
         <input type="hidden" name="vid" value="$vid" />
        
        <div class="row mb-3">
          <label class="col-sm-2">{lang username}</label>
          <div class="col-sm-10"><strong><code>$_G[username]</code></strong>
          </div>
        </div>
        <!--{if $userstatus['lastvisit']}-->
        <div class="row mb-3">
          <label class="col-sm-2">最近在线时间</label>
          <div class="col-sm-10"><strong><code><!--{eval echo dgmdate($userstatus['lastvisit'])}--></code></strong>
          </div>
        </div>
        <!--{/if}-->
				<div class="row mb-3">
          <label class="col-sm-2"><!--{if $users[regip]}-->{lang registration_time}<!--{else}-->{lang add_time}<!--{/if}--></label>
          <div class="col-sm-10"><strong><code><!--{eval echo dgmdate($users['regdate'])}--></code></strong>
          </div>
        </div>
				<div class="row mb-3">
          <label class="col-sm-2">{lang email}</label>
          <div class="col-sm-10"><strong><code>$space['email']</code></strong>
          </div>
        </div>
        <!--{if $users['phone']}-->
        <div class="row mb-3">
          <label class="col-sm-2">手机号码</label>
          <div class="col-sm-10"><strong><code><!--{eval $phone=$users['phone'];if(strlen($phone) === 11)$phone = substr($phone, 0, 3) . '******' . substr($phone, 9);echo $phone}--></code></strong>
          </div>
        </div>
        <!--{/if}-->
        <!--{loop $settings $key $value}--> 
        <!--{if $value[available]}-->
        <div class="row mb-3" id="th_$key">
          <label class="col-sm-2" for="$key">$value[title]<!--{if $value[required]}--><span class="rq" title="{lang required}">*</span><!--{/if}--></label>
					<div class="col-md-4">
            $htmls[$key]
          </div>
					<div class="col-md-4">
            <!--{if $vid || $key=='department'}-->
            <input type="hidden" name="privacy[$key]" value="$privacy[$key]" />
            <!--{else}-->
            <select name="privacy[$key]" class="form-select" style="width:120px;">
                <!--{loop $_config['profile']['privacy'] $k $v}-->
                <option value="$k" {if $privacy[$key] == $k} selected="selected"{/if}>$v</option>
                <!--{/loop}-->
            </select>
            <!--{/if}-->
          </div>
          </div>
        <!--{/if}-->
        <!--{/loop}--> 
        <!--{if in_array('timeoffset', $allowitems)}-->
        <div class="row mb-3">
            <label class="col-sm-2" for="timeoffset">{lang time_zone}</label>
            <div class="col-md-4">
                <!--{eval $timeoffset = array({lang timezone});}-->
                <select name="timeoffset" class="form-select" id="timeoffset">
                    <!--{loop $timeoffset $key $desc}-->
                    <option value="$key" {if $key==$space[timeoffset]} selected="selected" {/if}>$desc</option>
                    <!--{/loop}-->
                </select>
                <p class="mt10">{lang current_time} :
                    <!--{date($_G['timestamp'])}-->
                </p>
                <span class="gray form-text">{lang time_zone_state}</span>
            </div>
        </div>
        <!--{/if}-->
        <div class="row mb-3">
            <label class="col-sm-2" for="language">{lang language}</label>
            <div class="col-md-4">
                <select name="language" class="form-select" id="language">
                    <option value="" <!--{if $space[language] == ''}-->selected="selected"<!--{/if}-->>{lang language_auto}</option>
                    <!--{loop $langList $key $value}-->
                    <option value="$key" <!--{if $space[language] == $key}-->selected="selected"<!--{/if}--> /> $value</option>
                    <!--{/loop}-->
                </select>
            </div>
        </div>
        <!--{if !$vid || $showbtn}-->
        <dl class="mb-3 d-grid">
             <input type="submit" class="btn btn-primary btn-round bodyloading" <!--{if $vid}-->value="{lang submit_audit}"<!--{else}-->value="{lang save}"<!--{/if}-->>
        </dl>
         <!--{/if}-->
      </form>
      <!--图片裁剪START-->
      <div class="modal fade" id="image-modal">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">

            <div class="modal-header">
                <h6 class="modal-title text-truncate" id="image-modal-label">上传图片</h6>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="image-body">
                <div class="image-upload mb-3">
                    <button class="btn btn-primary" type="button" onclick="$('input[id=imageInput]').click();">请选择图片</button>
                    <span class="image-name"></span>
                    <input type="file" class="image-input d-none" id="imageInput" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
                </div>
                <div class="row">
                    <div class="col-lg-8 mb-3">
                    <div class="image-wrapper"></div>
                    </div>
                    <div class="col-lg-4">
                    <div class="image-previews clearfix">
                        <div class="image-preview preview-lg"></div>
                        <div class="image-preview preview-md"></div>
                        <div class="image-preview preview-sm"></div>
                    </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 image-btns">
                    <button class="btn btn-primary mdi mdi-rotate-left" data-method="rotate" data-option="-90" type="button" title="向左旋转-90度"></button>
                    <button class="btn btn-primary mdi mdi-rotate-right" data-method="rotate" data-option="90" type="button" title="向右旋转90度"></button>
                    <button type="button" class="btn btn-primary mdi mdi-magnify-plus-outline" data-method="zoom" data-option="0.1" title="放大图片"></button>
                    <button type="button" class="btn btn-primary mdi mdi-magnify-minus-outline" data-method="zoom" data-option="-0.1" title="缩小图片"></button>
                    <button type="button" class="btn btn-primary mdi mdi-cached" data-method="reset" title="重置图片"></button>
                    </div>
                    <div class="col-lg-5 image-btns toggles-btns">
                    </div>
                    <div class="col-lg-3">
                    <button class="btn btn-primary btn-block upload-btn mdi mdi-content-save" type="submit">保存修改</button>
                    </div>
                </div>
                </div>
            </div>
            
            </div>
        </div>
    </div>
    </div>
  </div>
</div>
</main>
<script type="text/javascript">
  var formhash = '{FORMHASH}';
jQuery(document).on('blur','.has-error .form-control',function(){
	if(this.value) jQuery(this).closest('.form-group').removeClass('has-error');
});
function show_error(fieldid, extrainfo) {
	var elem = jQuery('#th_'+fieldid);
	if(elem) {
		elem.addClass('has-error');
		elem.title = elem.innerHTML;
		extrainfo = (typeof extrainfo == "string") ? extrainfo : "";
		
		document.getElementById('showerror_'+fieldid).innerHTML = "{lang check_date_item} " + extrainfo;
		$(fieldid).focus();
	}
}
function show_success(message) {
	message = message == '' ? '{lang update_date_success}' : message;
  showmessage(message+'。3秒钟之后刷新页面...','info',3000,1,'top',function(){
      window.location.reload();
  });
}
function clearErrorInfo() {
	jQuery('.has-error').removeClass('has-error');
}
</script>
<script type="text/javascript" src="static/lyear/js/cropper/cropper.min.js"></script>
<script type="text/javascript" src="{MOD_PATH}/scripts/cropper.js"></script>
<!--{template lyear:footer_simple}--> 